
/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import Confirm from "../../common/Confirm"
import * as Relay from "react-relay";
import OrderTable from "./OrderTable";
import OrderCensusMutation from "./mutation/OrderCensusMutation";
import {Link} from 'react-router';
import InputBox from "../../common/InputBox"
import OrderCensusByDateMutation from "./mutation/OrderCensusByDateMutation";
import "./css/homePage.css";
import { DatePicker} from 'antd';
export default class HomePage extends React.Component{

    constructor(props){
        super(props);
        this.state={
            //累计的
            totalCount:"",
            //当天的
            increasedOrderToday:"",
            //七天的
            active7days:"",
            //三十天的
            active30days:"",
            /*后台错误提示*/
            hint:"",
            /*查询起始日期,startValue记录格式转换前*/
            startDate:null,
            startValue:null,
            /*查询结束日期,endValue记录格式转换前*/
            endDate:null,
            endValue:null,
        };
        this.style = {
            confirm: {
                width: '120px',
                height: '30px',
                backgroundColor: "#a9d877",
                fontSize: "16px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius: "3px",
                marginRight: "25px",
            },
        };
    }
    /*页面加载之前执行*/
    componentWillMount(){
        this.orderCensu();

    }
    componentDidMount(){
        this.orderCensuByDate(10, 1);
    }

    //初始化查找
    onSure(pageSize, pageNum) {
        // debugger
        this.orderCensuByDate(pageSize, pageNum);
    }

    //点击搜索的条件查找
    onSureSearch(pageSize, pageNum) {
        // debugger
        this.orderCensuByDateSearch(pageSize, pageNum);
    }

    //初始化加载 用户统计页面
    orderCensu(){
        Relay.Store.commitUpdate(
            new OrderCensusMutation({
            }),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    // debugger
                    let errorCode = response.orderCensus.orderCensus.errorCode;
                    let data = response.orderCensus.orderCensus;
                    let orderTotalModel = data.orderTotalModel;

                    let totalCount = orderTotalModel.totalCount;
                    let increasedOrderToday = orderTotalModel.increasedOrderToday;
                    let active7days = orderTotalModel.active7days;
                    let active30days = orderTotalModel.active30days;
                    // console.log(data)
                    if (errorCode === "0") {
                        this.setState({
                            totalCount:totalCount,
                            increasedOrderToday:increasedOrderToday,
                            active7days:active7days,
                            active30days:active30days,

                        });
                    } else {
                        this.setState({
                            hint: data.value,
                        });
                    }
                }

            }
        );
    }

    //初始化方法 及分页显示
    orderCensuByDate(pageSize,pageNum){
        // debugger
        Relay.Store.commitUpdate(
            new OrderCensusByDateMutation({
                timeBefore:this.state.startDate,
                timeAfter:this.state.endDate,
                pageNum: pageNum || 1,
                pageSize:pageSize || 10,

            }),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    // debugger
                    let errorCode = response.orderCensusByDate.orderCensusByDate.errorCode;
                    let date = response.orderCensusByDate.orderCensusByDate;
                    let orderCensusList = date.orderCensusList;
                    // console.log(data)
                    if (errorCode === "0") {
                        let total = date.totalResult;
                        this.setState({
                            orderCensusList:orderCensusList,
                            totalResult: date.totalResult,
                        });
                        this.refs.ordertable.setState({
                            orderCensusList:orderCensusList,
                            total:total
                        });
                    } else {
                        this.setState({
                            hint: date.value,
                        });
                    }
                }

            }
        );
    }

    //点击搜索的方法 及分页显示
    orderCensuByDateSearch(pageSize,pageNum){
        Relay.Store.commitUpdate(
            new OrderCensusByDateMutation({
                timeBefore:this.state.startDate,
                timeAfter:this.state.endDate,
                pageNum: pageNum || 1,
                pageSize:pageSize || 10,

            }),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    // debugger
                    let errorCode = response.orderCensusByDate.orderCensusByDate.errorCode;
                    let date = response.orderCensusByDate.orderCensusByDate;
                    let orderCensusList = date.orderCensusList;
                    // console.log(data)
                    if (errorCode === "0") {
                        let total = date.totalResult;
                        this.setState({
                            orderCensusList:orderCensusList,
                            totalResult: date.totalResult,
                        });
                        this.refs.ordertable.setState({
                            orderCensusList:orderCensusList,
                            total:total
                        });
                        this.refs.ordertable.refs.pagination.setState({
                           text:1,
                        });
                    } else {
                        this.setState({
                            hint: date.value,
                        });
                    }
                }

            }
        );
    }

    /*搜索起始时间*/
    setStartDate(date) {
        ////console.log(!date);
        if (!date) {
            this.setState({
                startDate: null,
                startValue: null
            }, this.myRelay);
        } else {
            this.setState({
                startDate: date.format('YYYY-MM-DD'),
                startValue: date
            }, this.myRelay);
        }
    }


    // asdasd
    /*搜索结束时间*/
    setEndDate(date) {
        if (!date) {
            this.setState({
                endDate: null,
                endValue:null
            }, this.myRelay);
        }else{
            this.setState({
                endDate: date.format('YYYY-MM-DD'),
                endValue:date
            }, this.myRelay);
        }
    }

    /*限制起始日期必须小于结束日期*/
    disabledStartDate = (startDate) => {
        const endDate = this.state.endValue;
        //console.log(endDate)
        if (!startDate || !endDate) {
            return false;
        }
        return startDate.valueOf() > endDate.valueOf();
    }

    /*限制结束日期必须大于等于起始日期*/
    disabledEndDate = (endDate) => {
        const startDate = this.state.startValue;
        if (!startDate || !endDate) {
            return false;
        }
        return endDate.valueOf() <= startDate.valueOf();
    }

    render() {
        return (
            <div>
                <div className="loan_rec_box">
                    <Link to="/homepage">
                        <Confirm className="home_page-btn" style={this.style.confirm} tcontext={'用户统计'}/>
                    </Link>
                    <Link to="/entercensus">
                        <Confirm className="home_page-btn " style={this.style.confirm} tcontext={'企业统计'}/>
                    </Link>
                    <Link to="/ordercensus">
                        <Confirm className="home_page-btn active" style={this.style.confirm} tcontext={'订单统计'}/>
                    </Link>

                    <table className="loan_rec_table settle_rec_table">
                        <thead>
                        <tr>
                            {
                                ["累计订单","今日新增订单","7天新增订单","30天新增订单"].map((item,index)=>
                                    <th key={index}> {item} </th>
                                )
                            }
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{this.state.totalCount}</td>
                            <td>{this.state.increasedOrderToday}</td>
                            <td>{this.state.active7days}</td>
                            <td>{this.state.active30days}</td>
                        </tr>
                        </tbody>
                    </table>

                    <div className="dete_date1">
                        <span className="loan_rec_tab">
                        日期：<DatePicker format="YYYY-MM-DD" style={{marginRight:25}}   onChange={value => this.setStartDate(value)} disabledDate={this.disabledStartDate} />
                        至<DatePicker format="YYYY-MM-DD"  style={{marginLeft:12,marginRight:40}} onChange={value => this.setEndDate(value)}   disabledDate={this.disabledEndDate} /></span>

                        <Confirm style={this.style.confirm} tcontext={'搜索'} touch={this.onSureSearch.bind(this)} />
                        <span className="recharge_settle_searchHint">{this.state.hint}</span>
                    </div>

                    <OrderTable ref={"ordertable"} userCensusList={this.state.orderCensusList} orderCensuByDate={this.orderCensuByDate.bind(this)}/>
                </div>
            </div>

        )
    }

}
